<template>
    <div class="like">
        <div class="like-top">
            <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
            猜你喜欢
        </div>
        <ul>
            <li class="like-item border-bottom" v-for="(item,key) in likeList" :key="key">
                <div class="like-img">
                    <img :src="item.imgUrl" :alt="item.title">
                </div>
                <div class="like-text">
                    <div class="like-title">
                        {{item.title}}
                    </div>
                    <div class="like-message">
                        {{item.message}}
                    </div>
                    <div class="like-map">
                        <span class="like-mark">￥<b>{{item.pre}}</b></span>
                        <span class="like-item-map">{{item.map}}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  props: ["likeList"],
  data() {
    return {
      
    };
  }
};
</script>
<style scoped>
.like {
  margin-top: 0.2rem;
  font-size: 0.28rem;
  background: #fff;
  padding: 0 0.2rem;
}
.like-top {
  padding: 0.2rem 0;
  font-size: 0.32rem;
}
.like-top img {
  width: 0.3rem;
  height: 0.3rem;
}
.like-item {
  padding: 0.2rem 0;
  position: relative;
  overflow: hidden;
}
.like-img {
  float: left;
}
.like-img img {
  width: 2rem;
  height: 2rem;
}
.like-text {
  overflow: hidden;
  padding-left: 0.2rem;
}
.like-title {
  font-size: 0.36rem;
  color: #212121;
  margin-top: 0.4rem;
}
.like-message {
  font-size: 0.24rem;
  color: #616161;
  margin-top: 0.3rem;
}
.like-map {
  font-size: 0.24rem;
  color: #616161;
  margin-top: 0.3rem;
  position: relative;
}
.like-mark {
  color: #ff8300;
}
.like-mark b {
  font-size: 0.4rem;
}
.like-item-map {
  position: absolute;
  right: 0;
  top: 0.1rem;
  font-size: 0.28rem;
}
</style>
